<template>
  <div class="goods">
    <!-- 打卡 -->
    <div class="header">
      <router-link to="/Backstage" class="shou">首页</router-link>/ 商品管理 / 商品列表
    </div>
    <div class="soui">
      <el-input class="sou" placeholder="请输入内容" v-model="input10" clearable></el-input>
      <div class="sous" :plain="true" @click="btn(input10)">
        <i class="el-icon-search"></i>
      </div>
      <div class="tian">
        <el-button @click="tiao">添加商品</el-button>
      </div>
    </div>
    <!-- 中间的表格 -->
    <div class="biaoge">
      <el-table :data="tableData" style="width: 100%"  height="430px" overflow:hidden>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="800"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="130"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{scope.row.add_time | dealTime}}</template>
        </el-table-column>
        <el-table-column prop="mg_state" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="fang(scope.row.username,scope.row.email,scope.row.mobile,scope.row.id)"
            ></el-button>
            <el-button type="success" icon="el-icon-delete" circle @click="shan(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="tiaoshu"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zong"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import { splb, tjsp } from "../../api/api";
export default {
  name: "goods",
  data() {
    return {
      input10: "",
      tiaoshu: [10, 20, 30, 40, 50],
      pagesize: 10,
      currentPage4: 1,
      zong: 1,
      tableData: []
    };
  },
  methods: {
    //点击搜索未写
    btn() {},
    xin() {
      splb({
        query: "",
        pagenum: this.currentPage4,
        pagesize: this.pagesize
      }).then(res => {
        console.log(res);
        if (res.data.meta.status >= 200 && res.data.meta.status < 300) {
          console.log(res.data.data);
          this.zong = res.data.data.total;
          this.tableData = res.data.data.goods;
        }
        console.log("data", this.tableData);
      });
    },
    //分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      console.log(this.pagesize);
      this.xin();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      console.log(this.currentPage4);
      this.xin();
    },
    //添加商品列表
    tiao(){
      this.$router.push('/goodsadd')
    }
  },
  //日期
  filters: {
    dealTime(val) {
      return moment(val).format("YYYY-MM-DD");
    }
  },
  created() {
    this.xin();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goods {
  height: 832px;
  width: 1620px;
  background-color: #fff;
  border: 1px solid #e9eef3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
}
.biaoge {
  border: 1px solid #e9eef3;
}
.header {
  color: #606266;
  letter-spacing: 2px;
}
.shou {
  font-weight: bold;
  color: black;
}
.soui {
  margin-top: 8px;
  display: flex;
  align-items: center;
  position: relative;
}
.sou {
  width: 290px;
}
.el-icon-error {
  position: absolute;
  left: 274px;
}
.sous {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  border: 1px solid #dcdfe6;
  border-radius: 0 5px 5px 0;
  background-color: #f5f7fa;
}
.tian {
  margin-left: 8px;
  font-size: 14px;
}
.tian .el-button {
  color: #67c23a;
  border: 1px solid #c2e7b0;
  border-radius: 5px;
  background-color: #f0f9eb;
}
.el-button:hover {
  background-color: #67c23a;
  color: #fff;
}
.biaoge{
  margin-top: 20px;
}
</style>
